<!DOCTYPE html>
<html lang="en-US">
<head>
	<meta charset="utf-8" />
	<title>PowerTip Edge Case Tests</title>

	<!-- Library Resources -->
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.js"></script>

	<!-- PowerTip Core Resources -->
	<script type="text/javascript" src="../src/core.js"></script>
	<script type="text/javascript" src="../src/csscoordinates.js"></script>
	<script type="text/javascript" src="../src/displaycontroller.js"></script>
	<script type="text/javascript" src="../src/placementcalculator.js"></script>
	<script type="text/javascript" src="../src/tooltipcontroller.js"></script>
	<script type="text/javascript" src="../src/utility.js"></script>
	<link id="powertip-css" rel="stylesheet" type="text/css" href="../css/jquery.powertip.css" />

	<!-- Test Scripts -->
	<script type="text/javascript" src="tests-edge.js"></script>
	<script type="text/javascript">
		$(function() {
			// css theme switcher
			function setTheme() {
				var theme = $('#theme-switcher').val();
				if (theme !== '') {
					theme = '-' + theme;
				}
				$('#powertip-css').attr('href', '../css/jquery.powertip' + theme + '.css');
			}

			// run theme switcher on page load
			setTheme();

			// hook theme switcher to select change
			$('#theme-switcher').on('change', setTheme);

			// session debug info box
			var debugOutput = $('#session pre');
			setInterval(function() {
				var sessionText = '';
				$.each(session, function(key, value) {
					var val;
					if (value && typeof value === 'object' && value.jquery) {
						val = value.attr('id') || value.parent().attr('id') || value.length;
					} else {
						val = value;
					}
					sessionText += key + ': ' + val + '\n';
				});
				debugOutput.text(sessionText);
			}, 250);
		});
	</script>

	<!-- Custom Styles For Test Cases -->
	<style type="text/css">
		header, section { margin-bottom: 20px; }
		section { border: 1px solid #CCC; margin: 20px; padding: 20px; }
		#powerTip { white-space: normal; }
		#huge-text div, #huge-text-smart div  { text-align: center; }
		#huge-text input, #huge-text-smart input { margin: 10px; padding: 10px; }
		#huge-text .east, #huge-text-smart .east { margin-left: 450px; }
		svg { display: block; margin: 0 auto; }
		#session { position: fixed; right: 10px; top: 10px; font-size: 10px; width: 160px; background-color: #fff; border: 1px solid #ccc; padding: 10px; overflow: hidden; }
		#session pre { margin: 0; }
	</style>
</head>
<body>
	<header>
		<h1>PowerTip Edge Case Tests</h1>
		<p>
			Tooltip CSS Theme:
			<select id="theme-switcher">
				<option value="">Default</option>
				<option value="blue">Blue</option>
				<option value="dark">Dark</option>
				<option value="green">Green</option>
				<option value="light">Light</option>
				<option value="orange">Orange</option>
				<option value="purple">Purple</option>
				<option value="red">Red</option>
				<option value="yellow">Yellow</option>
			</select>
		</p>
	</header>
	<section id="open-on-load">
		<h2>Open on load</h2>
		<p>The button below has a tooltip that will open when the document loads. The tooltip should be properly positioned.</p>
		<input type="button" value="Button" title="This is the tooltip text." />
	</section>
	<section id="tab-change">
		<h2>Tab change</h2>
		<p>The button below has a tooltip that is set to follow the mouse. Focus the element and change to another browser tab, then change back to this tab. The tooltip should revert to a static placement when the browser fires the focus event.</p>
		<input type="button" value="Button" title="This is the tooltip text." />
	</section>
	<section id="click-toggle">
		<h2>Click toggle</h2>
		<p>The button below has a tooltip that will toggle when clicked.</p>
		<input type="button" value="Button" title="This is the tooltip text." />
	</section>
	<section id="remote-target">
		<h2>Remote target</h2>
		<p>The link below has a tooltip that will open when the button is clicked. It should open normally.</p>
		<p><a href="#" title="This is the tooltip text.">This link has a tooltip</a></p>
		<input type="button" value="Show link tooltip" />
	</section>
	<section id="disable-button">
		<h2>Self-disabling button</h2>
		<p>The button below will disable itself when used with the mouse or keyboard. The tooltip should close.</p>
		<input type="button" value="Disable Me" title="This is the tooltip text." />
	</section>
	<section id="auto-disable-button">
		<h2>Auto-disabling button</h2>
		<p>The button below will disable itself 2 seconds after you hover or focus on it. The tooltip should close.</p>
		<input type="button" value="Hover over me" title="This is the tooltip text." />
	</section>
	<section id="long-delay">
		<h2>Long delay</h2>
		<p>The two buttons below have tooltips with long delays. Mousing from one to the other should open tooltips normally.</p>
		<input id="first-button" type="button" value="Hover over me" title="This is the tooltip text." />
		<input id="second-button" type="button" value="Hover over me" title="This is the tooltip text." />
	</section>
	<section id="manual-and-interactive">
		<h2>Manual and interactive</h2>
		<p>The buttons below have tooltips, one with manual enabled, the other with mouseOnToPopup enabled. The manual tooltip should not close when you mouse off of the tooltip element.</p>
		<input id="manual-button" type="button" value="Manual Button" title="This is the tooltip text." />
		<input id="interactive-button" type="button" value="MouseOnToPopup Button" title="This is the tooltip text." />
	</section>
	<section id="huge-text">
		<h2>Huge Text</h2>
		<p>The tooltips for the buttons below have a lot of text. The tooltip div is completely elastic for this demo. The tooltips should be properly placed when they render.</p>
		<div>
			<input type="button" class="north-west-alt" value="North West Alt" />
			<input type="button" class="north-west" value="North West" />
			<input type="button" class="north" value="North" />
			<input type="button" class="north-east" value="North East" />
			<input type="button" class="north-east-alt" value="North East Alt" /><br />
			<input type="button" class="west" value="West" />
			<input type="button" class="east" value="East" /><br />
			<input type="button" class="south-west-alt" value="South West Alt" />
			<input type="button" class="south-west" value="South West" />
			<input type="button" class="south" value="South" />
			<input type="button" class="south-east" value="South East" />
			<input type="button" class="south-east-alt" value="South East Alt" />
		</div>
	</section>
	<section id="huge-text-smart">
		<h2>Huge Text with Smart Placement</h2>
		<p>The tooltips for the buttons below have a lot of text. The tooltip div is completely elastic for this demo. The tooltips should be properly placed when they render.</p>
		<div>
			<input type="button" class="north-west-alt" value="North West Alt" />
			<input type="button" class="north-west" value="North West" />
			<input type="button" class="north" value="North" />
			<input type="button" class="north-east" value="North East" />
			<input type="button" class="north-east-alt" value="North East Alt" /><br />
			<input type="button" class="west" value="West" />
			<input type="button" class="east" value="East" /><br />
			<input type="button" class="south-west-alt" value="South West Alt" />
			<input type="button" class="south-west" value="South West" />
			<input type="button" class="south" value="South" />
			<input type="button" class="south-east" value="South East" />
			<input type="button" class="south-east-alt" value="South East Alt" />
		</div>
	</section>
	<section id="svg-elements">
		<h2>SVG Elements</h2>
		<p>The following glyphs are SVG elements. Tooltips should be placed correctly on all SVG elements.</p>
		<svg width="500px" height="400px" xmlns="http://www.w3.org/2000/svg" version="1.1">
			<ellipse id="red-ellipse1" title="North placement" transform="translate(240 80) scale(2)" rx="25" ry="10" fill="white" stroke="red" stroke-width="2" />
			<ellipse id="red-ellipse2" title="East placement" transform="translate(360 200) scale(2)" rx="25" ry="10" fill="white" stroke="red" stroke-width="2" />
			<ellipse id="red-ellipse3" title="South placement" transform="translate(240 320) scale(2)" rx="25" ry="10" fill="white" stroke="red" stroke-width="2" />
			<ellipse id="red-ellipse4" title="West placement" transform="translate(120 200) scale(2)" rx="25" ry="10" fill="white" stroke="red" stroke-width="2" />
			<ellipse id="red-ellipse5-alt" title="Alt Northwest placement" transform="translate(120 80) scale(2)" rx="25" ry="10" fill="white" stroke="red" stroke-width="2" />
			<ellipse id="red-ellipse5" title="Northwest placement" transform="translate(120 140) scale(2)" rx="25" ry="10" fill="white" stroke="red" stroke-width="2" />
			<ellipse id="red-ellipse6-alt" title="Alt Northeast placement" transform="translate(360 80) scale(2)" rx="25" ry="10" fill="white" stroke="red" stroke-width="2" />
			<ellipse id="red-ellipse6" title="Northeast placement" transform="translate(360 140) scale(2)" rx="25" ry="10" fill="white" stroke="red" stroke-width="2" />
			<ellipse id="red-ellipse7-alt" title="Alt Southwest placement" transform="translate(120 320) scale(2)" rx="25" ry="10" fill="white" stroke="red" stroke-width="2" />
			<ellipse id="red-ellipse7" title="Southwest placement" transform="translate(120 260) scale(2)" rx="25" ry="10" fill="white" stroke="red" stroke-width="2" />
			<ellipse id="red-ellipse8-alt" title="Alt Southeast placement" transform="translate(360 320) scale(2)" rx="25" ry="10" fill="white" stroke="red" stroke-width="2" />
			<ellipse id="red-ellipse8" title="Southeast placement" transform="translate(360 260) scale(2)" rx="25" ry="10" fill="white" stroke="red" stroke-width="2" />
		</svg>
	</section>
	<section id="complex-svg-elements">
		<h2>Complex SVG Elements</h2>
		<p>The following shapes are created using SVG. Tooltips should be placed correctly on all SVG elements.</p>
		<svg width="500px" height="400px" xmlns="http://www.w3.org/2000/svg" version="1.1">
			<path id="black-star" title="North placement" transform="translate(190,20) scale(.5)" d="M100,10 L100,10 40,180 190,60 10,60 160,180 z" stroke="black" fill="white" stroke-width="8" />
			<path id="black-line" title="East placement" d="M0,0 l 50,-25 a25,25 -30 0,1 50,-25 l 50,-25 a25,50 -30 0,1 50,-25 l 50,-25 a25,75 -30 0,1 50,-25 l 50,-25 a25,100 -30 0,1 50,-25 l 50,-25" transform="translate(200 200) scale(.5) rotate(35)" fill="none" stroke="black" stroke-width="8" />
			<path id="black-mexico" title="South placement" transform="translate(-170 80) scale(.7)" fill="white" stroke="black" stroke-width="4" d="M631.1390445811901,321.77690759874906L628.7425104969154,327.46667091140154L627.6208118045528,332.14949986078705L627.0474975487917,340.90584076528773L626.411222371781,344.10198679406136L627.4242350938447,347.6925832560501L629.2952452961199,350.91314211323913L630.4779357606378,356.02667383953155L634.5707883308241,360.9557045795793L636.012466631564,364.726271029657L638.4564937382497,367.9833685499932L645.1297965913207,369.7289993375331L647.7468324825606,372.4842801334311L653.2508209909402,370.59717198098224L658.03376094103,369.87904838004266L662.7108729482354,368.6266660930511L666.6285613831385,367.42778848964645L670.5320462498826,364.6561893904515L671.9023232223401,360.7757605104865L672.2372219610671,355.2283772751382L673.2403600779996,353.2802524846172L677.3471123542048,351.45676405614097L683.77045505175,349.75102834539916L689.198880376473,349.8061467422586L692.8726452844894,349.1190934648212L694.4145062589392,350.457710670721L694.3834338576274,353.63215775971827L691.2888367353843,357.66509021583965L690.0169705437786,361.72879939538285L691.2118756733829,362.8380499144363L690.4172805226004,365.7227335911533L689.0861634200136,370.92965382678125L687.4333458985951,369.2840863395406L686.132292210297,369.4355472718241L684.9497406459144,369.55898560454096L682.8613395072962,373.61585623830774L681.6956366569561,372.8658286627471L680.9477730322438,373.1914232647639L681.0308346945446,374.1632858119232L675.2212849367086,374.2393116044063L669.3504236081442,374.3779893679462L669.436960614539,378.103581856211L666.5851990810157,378.17340577864053L668.9879164806993,380.33924760775983L671.3647477666258,381.82194109381857L672.1032121126799,383.24247903283276L673.1396376602418,383.62206439262616L673.0345443574353,385.88187417724396L664.8810574782938,386.05861685886L661.907184383218,391.5091640197933L662.8344800785168,392.73466669551823L662.1170333250867,394.3004183051362L661.9893858259518,396.2341477664124L654.6587116782264,389.18330934403025L651.34857457773,387.05903084781596L646.1351307787214,385.36056070229466L642.578875919417,385.85236512226254L637.4570767755117,388.34623961080683L634.2370534387708,388.9908721335895L629.7417986926357,387.21994597629435L624.9791242037214,385.9190283545708L619.0801168504181,382.80850774619546L614.3427220845314,381.8066109290787L607.2556405785878,378.58846065808626L602.0790808013094,375.3005009200801L600.5518090624203,373.4926663491044L597.0578519963617,373.00080763503104L590.7472216522768,370.7091497393793L588.2882597583889,367.60598444759574L581.8188331366152,363.6106035826688L578.9668516015977,359.32701745667555L577.6983972185706,356.055797038782L579.7792355866999,355.4996067845068L579.2636988072874,353.59717630694126L580.7712004969587,351.949832199576L580.9400920559212,349.67869040010953L579.0773657876555,346.6454951065124L578.7031500924621,344.0128293768203L576.9086266115761,340.6196055863277L572.1236229273595,333.88087232182323L566.5990556767756,328.49242616458343L564.1175301553972,324.28873798383063L559.3743629801547,321.3579613286737L558.4730632348299,319.71347776814986L559.7828744399674,315.7705693303957L557.0130107479456,314.0899913253245L553.9965781575432,310.74940281863144L553.1275368383943,306.17621152528807L550.1522722953059,305.4539304000365L547.3367156935035,301.8589740419552L545.156914315976,298.56820887268674L545.202776785345,296.56046643612103L542.9553639183637,291.5514885640763L541.7869238953259,286.561880327189L542.2633435467933,284.1465746161625L538.7850981555159,281.3482577190073L536.9467274491565,281.4779402230709L534.207176611834,279.4978847364272L532.8882330402218,281.9738199844406L533.2337118906858,285.0673077112945L532.9324932726461,289.8518564165232L534.3562948402142,292.6168205215481L537.7224307332845,297.31916802423376L538.4013194215817,298.8899169821898L539.1741782219033,299.41006316747126L539.5780859328158,301.6585183396906L540.5805532154267,301.64467698603903L541.1061291948972,305.85545508762675L542.5842214126475,307.6125883452066L543.4758954615678,309.97364802510515L546.615230780609,313.5004565841785L547.773831850082,319.6356038778383L549.152213621287,322.5856311231764L550.4179115591285,325.73038943485597L550.3610816658995,329.17772386689614L553.1570338832397,329.57225265264253L555.2069477468797,332.67556725941415L557.0614434430345,335.7154957966069L556.8060376757528,336.87590403420734L554.0830136185281,339.1249745814687L553.0364901327397,339.0289279171859L551.8762551236989,334.9631141552424L548.4300132572291,331.00137135116995L544.5865312007193,327.5733659167719L541.8226210249395,325.71550391505775L542.5980298586001,320.98774531869435L542.1744010081454,317.42230182883293L539.7231010207054,315.22300801192836L536.2298780480326,312.0529810651485L535.3674555182844,312.8232468556312L534.189113585834,311.03491137861454L530.9646504497667,309.2004789021218L528.2670231375715,305.2040030226232L528.7479058475299,304.7553147592322L530.9742474520464,305.3097853591944L533.4058713645187,303.0891122523842L534.0636418652416,300.22507436008135L530.5764914192205,295.3334537412645L527.6844112784197,293.3012156569457L526.3993951477198,289.1721929728734L525.1829461167747,284.857718964437L523.7058936225004,279.61248457942827L522.7283821408085,273.79308947791975L528.7597524049012,273.8611427033097L535.5658515064348,273.7633490780404L534.842840200872,274.94161385333376L542.332616036849,278.62809944309123L553.978661493946,283.9391642891652L564.8964829735426,284.56992373906445L569.2740717650157,284.8122351861094L569.5967881973443,282.2118800379874L579.1624101641775,282.69385331269666L580.9593548551809,285.0227077680054L583.6194320282688,287.1453916722559L586.7025605932887,290.0691997476095L588.2947705593623,293.4604381398942L589.4269679800892,297.0163617821147L592.2341545711794,299.0515411364024L596.8652054708068,301.12931964832967L600.7976648443041,296.1915577839659L605.4821545712327,296.1956772871066L609.3989168214237,298.837356652771L612.1029705804516,303.28198274539034L613.9647623475516,307.08490661039446L617.2881769125493,310.8152578907807L618.4442960953867,315.3546888997947L620.0162300553352,318.4205644922635L624.6038462022742,320.4879252935987L628.80989086392,321.9550962518425Z" />
			<g id="black-group" title="West placement" transform="translate(120 200) scale(2)" stroke="black" fill="white" stroke-width="2">
				<circle r="5" transform="translate(-10,-15)" />
				<circle r="5" transform="translate(-15,0)" />
				<circle r="10" transform="translate(-5,5)" />
				<circle r="5" transform="translate(15,5)" />
				<circle r="5" transform="translate(10,-5)" />
			</g>
			<circle id="black-circle" title="Northwest placement" transform="translate(120 80) scale(2)" r="20" fill="white" stroke="black" stroke-width="2" />
			<rect id="black-rect" title="Northeast placement" transform="translate(320 50) scale(2)" width="40" height="30" fill="white" stroke="black" stroke-width="2" />
			<polygon id="black-polygon" title="Southwest placement" transform="translate(-220 230) scale(.4)" fill="white" stroke="black" stroke-width="10" points="850,75 958,137.5 958,262.5 850,325 742,262.6 742,137.5" />
			<text id="black-text" title="Southeast placement" transform="translate(360 320) scale(2)" fill="black">Text</text>
		</svg>
	</section>
	<section id="rotated-svg-elements">
		<h2>Rotated SVG Elements</h2>
		<p>The following SVG shapes have been rotated. Tooltips should be placed correctly on all SVG elements.</p>
		<svg width="500px" height="400px" xmlns="http://www.w3.org/2000/svg" version="1.1">
			<ellipse id="blue-ellipse1" title="Northwest placement" transform="translate(120 80) rotate(10) scale(2)" rx="25" ry="10" fill="white" stroke="blue" stroke-width="2" />
			<ellipse id="blue-ellipse2" title="North placement" transform="translate(240 80) rotate(30) scale(2)" rx="25" ry="10" fill="white" stroke="blue" stroke-width="2" />
			<ellipse id="blue-ellipse3" title="Northeast placement" transform="translate(360 80) rotate(60) scale(2)" rx="25" ry="10" fill="white" stroke="blue" stroke-width="2" />
			<ellipse id="blue-ellipse4" title="West placement" transform="translate(100 200) rotate(90) scale(2)" rx="25" ry="10" fill="white" stroke="blue" stroke-width="2" />
			<ellipse id="blue-ellipse5" title="Mouse-follow" transform="translate(220 200) rotate(120) scale(2)" rx="25" ry="10" fill="white" stroke="blue" stroke-width="2" />
			<ellipse id="blue-ellipse6" title="East placement" transform="translate(360 200) rotate(150) scale(2)" rx="25" ry="10" fill="white" stroke="blue" stroke-width="2" />
			<ellipse id="blue-ellipse7" title="Southwest placement" transform="translate(100 320) rotate(-30) scale(2)" rx="25" ry="10" fill="white" stroke="blue" stroke-width="2" />
			<ellipse id="blue-ellipse8" title="South placement" transform="translate(220 320) rotate(-45) scale(2)" rx="25" ry="10" fill="white" stroke="blue" stroke-width="2" />
			<ellipse id="blue-ellipse9" title="Southeast placement" transform="translate(360 320) rotate(-150) scale(2)" rx="25" ry="10" fill="white" stroke="blue" stroke-width="2" />
		</svg>
	</section>
	<section id="trapped-mousefollow" data-powertip="This is the tooltip text.&lt;br /&gt;It is tall so you can test the padding.">
		<h2>Trapped mouse following tooltip</h2>
		<p>This box has a mouse following tooltip.</p>
		<p>Trap it in the bottom right corner of the viewport. It should flip out of the way. It should not flip if it only hits one edge.</p>
	</section>
	<div id="session"><pre /></div>
</body>
</html>
